<template>
	<div v-bind:class="['navigationbar_content','safeTop', (idefaultStyle) ? 'defaultStyle':'']">
		<div class="nav_left">
			<div class="backBtn"  @click="backBtnClick"  v-bind:style="{display: (isShowBack? 'flex':'none') }" >
				<img :src="ibackImgSrc" height="25">
			</div>
		</div>
		<label class="nav_title">{{title}}</label>
		<div class="nav_right">
			<button v-for="(item, index) in rightItems" @click="rightBtnsClick(index)">
				<img v-if="item.src" :src="item.src ? item.src:''" width="28" height="28" />
				<label v-if="item.name">{{item.name ? item.name:""}}</label>
			</button>
		</div>
	</div>
</template>

<script>
	import SLMCommUI from '../../js/SLMCommUI.js'
	
	export default {
		props: ["title","defaultStyle","backImgSrc","rightItems"],
		data() {
			return {
				isShowBack: false,
				idefaultStyle: true,
				ibackImgSrc: require('../../resources/images/comm/back.png'),
				ishaveBack:false
			}
		},
		mounted() {
			console.log("右边按钮："+JSON.stringify(this.rightItems))
			
			// 有上一页则显示返回
			this.isShowBack = window.history.length > 1
			
			if(JSON.stringify(this.backImgSrc) == '{}' || JSON.stringify(this.backImgSrc) == undefined) {
				//console.log("设置默认返回按钮图片")
			}else {
				this.ibackImgSrc = this.backImgSrc
				console.log("设置外部返回按钮图片"+JSON.stringify(this.backImgSrc))
			}
			
			if(JSON.stringify(this.defaultStyle) == '{}' || JSON.stringify(this.defaultStyle) == undefined) {
				console.log("设置默认样式"+JSON.stringify(this.defaultStyle))
			}else {
				this.idefaultStyle = this.defaultStyle
			}
		},
		methods: {
			backBtnClick: function(index) {
				if (window.history.length > 1) {
					//返回之前将viewport修改为不能缩放
					var viewports=	document.getElementsByName("viewport");
					console.log("viewports="+viewports);
					for (var i = 0; i < viewports.length; i++) {
						viewports[i].content ="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no";
					}
					if (SLMCommUI.isIosSystem()) {
						console.log("ios系统")
						this.$router.go(-1); //返回上一层
					}else {
						console.log("安卓系统")
						window.history.back()
					}
				}else {
					this.$router.push({
						path: '/'
					}).catch(err => {err})
				}
				
				this.ishaveBack = true
			},
			rightBtnsClick:function(index) {
				this.$emit('rightBtnsClick', index)
			}
		},
	}
</script>

<style>
	.navigationbar_content {
		width: 100%;
		min-height: 44px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.defaultStyle {
		background-color: white;
		border-bottom: 1px solid #cdcdcd;
	}
	
	.nav_left {
		cursor: pointer;
	}
	.backBtn {
		height: 44px;
		flex-direction: row;
		align-items: center;
		padding-left: 5px;
		min-width: 25px;
	}
	
	.nav_hidden {
		display: none;
	}
	
	.nav_title {
		font-size: 15px;
		font-weight: bold;
	}
	
	
	.defaultStyle .nav_title {
		color: #333333;
	}
	.nav_right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.nav_right button {
		width: 44px;
		height: 44px;
	}
</style>
